<template>
	<div>
		<div style='padding:30px 50px;background: #fff'>
			<div style='display: flex;justify-content: space-between;color:#464C5B'>
				<div>
					<span style="font-size:16px;margin-right: 8px">数据表</span>
					   <Dropdown trigger="click" @on-click='searchTable'>
                <Button type="ghost" size="small" style='padding:3px 8px;width:120px'>
                    <span class='search-data' :class="{'not_select':name == ''}" style='float:left;padding-top: 2px;'>{{name ? name : '请选择'}}</span>
                    <div style='transform:scale(0.5);float: right'>
                    	<Icon type="chevron-down" size='20'></Icon>
                    </div>
                </Button>
                <DropdownMenu slot="list" style='width:116px'>
                	<DropdownItem name="">请选择</DropdownItem>
                    <DropdownItem v-for="item in configData.table" :name="item.Name" :key="item">{{item.Name}}</DropdownItem>
                </DropdownMenu>
            </Dropdown>
				</div>
			</div>
			<div style='margin-top: 25px;margin-bottom: -30px'>
				<button class='btn btn-search' @click='searchData'>查询</button>
				<button class='btn-cancel btn-export' @click='exportData'>批量导出</button>
			</div>
		</div>
		<div style='padding:35px 20px;background: #fff;margin-top: 16px'>
			<button class='btn btn-hover' @click='addRelation'>创建模型</button>
			<div style="padding:1px">
				<Table :columns="relationList" :data="relationData" stripe></Table>
			</div>
	    	<div style='overflow: hidden'>
	    		<Page :current='pagination.page' :total="pagination.rowCount" :page-size='pagination.pageSize' style='float: right;margin: 20px 0;' @on-change='changePage'></Page>
	    	</div>
		</div>
		<!-- 创建关联 -->
        <Modal v-model="modal" width="600" class='schema-modal' @on-cancel="cancel">
            <p slot="header">
                <span>{{dataId?'编辑模型':'创建模型'}}</span>
            </p>
            <div>
               <Form :label-width='90'>
                    <FormItem label='数据表'>
                    	<p slot='label'><span class='star'>*</span>数据表</p>
                    	<Select v-model='formItem.name' @on-change='selectTable'>
                            <Option v-for="item in configData.table" :value="item.Name" :key="item"></Option>
                        </Select>
                    </FormItem>
                    <FormItem label='UUID'>
                        <RadioGroup v-model="uuid">
                            <Radio label="1">是</Radio>
                            <Radio label="0">否</Radio>
                        </RadioGroup>
                        <div>注：当uuid开启时，数据表的主键将会自动生成24位随机ID</div>
                    </FormItem>
                    <FormItem label='唯一字段'>
                        <Select
                            v-model="unique"
                            multiple
                            filterable
                            class='multiple-select'>
                            <Option v-for="(option, index) in fieldData" :value="option.Field" :key="option.Field" :disabled='disabledUnique.indexOf(option.Field)!=-1'>{{option.Field}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label='隐藏字段'>
                        <!-- <p slot='label'><span class='star'>*</span>隐藏字段</p> -->
                        <Select
                            v-model="hidden"
                            multiple
                            filterable
                            class='multiple-select'>
                            <Option v-for="(option, index) in fieldData" :value="option.Field" :key="option.Field">{{option.Field}}</Option>
                        </Select>
                    </FormItem>
                    <!-- <p style='font-size: 16px;line-height: 30px'>
                        <span style="padding-left: 10px;">schema</span>
                        <i class='iconfont icon-quanping' style='font-size:28px;float:right;color:#80848f;cursor:pointer;' @click='expandCode'></i>
                     </p>
                     <div style='height:300px;margin:10px 0 45px 0;font-size:20px'>
                        <codemirror v-model="formItem.schema" :options="editorOptions"></codemirror>
                    </div> -->
                </Form>
            </div>
            <div slot="footer" style='padding-top:0'>
                <button class='btn-cancel' @click="cancel">取消</button>
                <button class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
        <!-- <div v-if='code_modal' class='code-modal'>
            <div style='overflow:hidden'>
                <i class='iconfont icon-close' style='font-size:28px;cursor:pointer;color:#fff;float:right;margin-right:20px' @click='codeCancel'></i>
            </div>
            <div style='font-size:20px;height:100%'>
                <codemirror v-model="formItem.schema" :options="editorOptions"></codemirror>
            </div>
            
        </div> -->
        <div v-if='code_modal' class='code-modal'>
            
            <div class='codemirror'>
                <div class='codemirror-head'>
                <!-- 主题 -->
                    <Dropdown class='codemirror-head-dropdown' trigger='click' @on-click='selectTheme'>
                        <div style='color:#fff;font-size:14px'>
                            <span><i class='iconfont icon-yansezhuanhuan codemirror-head-icon'></i>{{theme}}</span>
                            <Icon type="arrow-down-b" style='margin-left: 2px'></Icon>
                        </div>
                        <DropdownMenu slot="list" class='codemirror-head-dropdownmenu'>
                            <DropdownItem :name='item.name' v-for='item in themeData' :key='item'>{{item.name}}</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    <!-- 字体大小 -->
                     <Dropdown class='codemirror-head-dropdown' trigger='click' @on-click='fontSizes'>
                        <div style='color:#fff;font-size:14px'>
                            <span><i class='iconfont icon-t codemirror-head-icon'></i>{{font}}</span>
                            <Icon type="arrow-down-b" style='margin-left: 2px'></Icon>
                        </div>
                        <DropdownMenu slot="list" style='width:140px;'>
                            <DropdownItem :name='item.font' v-for='item in fonts' :key='item'>{{item.font}}</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>

                    <Dropdown class='codemirror-head-dropdown' trigger='click' @on-click='selectLanguage'>
                        <div style='color:#fff;font-size:14px'>
                            <span><i class='iconfont icon-shezhi codemirror-head-icon'></i>{{language}}</span>
                            <Icon type="arrow-down-b" style='margin-left: 2px'></Icon>
                        </div>
                        <DropdownMenu slot="list" class='codemirror-head-dropdownmenu'>
                            <DropdownItem :name='item.mime' v-for='item in languageData' :key='item'>{{item.name}}</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>

                    <i class='iconfont icon-close icon-closed' @click='codeCancel'></i>
                </div>
                <div style='height:100%' ref='codemirrors'>
                    <codemirror v-model="formItem.schema" :options="editorOptions"></codemirror>
                </div>
                
            </div>
        </div>

	</div>
</template>
<script type="text/javascript">
    import axios from 'axios'
    import { codemirror } from 'vue-codemirror'
     // language
      import 'codemirror/mode/javascript/javascript.js'
      // theme css
      import 'codemirror/theme/monokai.css'
      // require active-line.js
      import'codemirror/addon/selection/active-line.js'
      // styleSelectedText
      import'codemirror/addon/selection/mark-selection.js'
      import'codemirror/addon/search/searchcursor.js'
      // hint
      import'codemirror/addon/hint/show-hint.js'
      import'codemirror/addon/hint/show-hint.css'
      import'codemirror/addon/hint/javascript-hint.js'
      import'codemirror/addon/selection/active-line.js'
      // highlightSelectionMatches
      import'codemirror/addon/scroll/annotatescrollbar.js'
      import'codemirror/addon/search/matchesonscrollbar.js'
      import'codemirror/addon/search/searchcursor.js'
      import'codemirror/addon/search/match-highlighter.js'
      // keyMap
      import'codemirror/mode/clike/clike.js'
      import'codemirror/addon/edit/matchbrackets.js'
      import'codemirror/addon/comment/comment.js'
      import'codemirror/addon/dialog/dialog.js'
      import'codemirror/addon/dialog/dialog.css'
      import'codemirror/addon/search/searchcursor.js'
      import'codemirror/addon/search/search.js'
      import'codemirror/keymap/sublime.js'
      // foldGutter
      import'codemirror/addon/fold/foldgutter.css'
      import'codemirror/addon/fold/brace-fold.js'
      import'codemirror/addon/fold/comment-fold.js'
      import'codemirror/addon/fold/foldcode.js'
      import'codemirror/addon/fold/foldgutter.js'
      import'codemirror/addon/fold/indent-fold.js'
      import'codemirror/addon/fold/markdown-fold.js'
      import'codemirror/addon/fold/xml-fold.js'
	   export default{
        components: {
            codemirror
        },
		    data(){
			      return{
                code_modal:false,
                editorOptions: {
                    tabSize: 4,
                      styleActiveLine: false,
                      lineNumbers: true,
                      lineWrapping:true,
                      styleSelectedText: false,
                      line: true,
                      foldGutter: true,
                      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                      highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
                      mode: 'text/javascript',
                      // hint.js options
                      hintOptions:{
                        // 当匹配只有一项的时候是否自动补全
                        completeSingle: false
                      },
                      //快捷键 可提供三种模式 sublime、emacs、vim
                      keyMap: "sublime",
                      matchBrackets: true,
                      showCursorWhenSelecting: true,
                      theme: "monokai",
                      extraKeys: { 
                        "Ctrl": "autocomplete",
                        "Ctrl-S": ()=> {
                            this.code_modal = false
                        }

                    }
                },
				    modal:false,
                showMore:0,
				relationList: [
                {
                    title: '数据表',
                    key: 'name'
                },
                {
                    title: 'UUID',
                    key: 'uuid',
                    render: (h, params) => {
                        return h('div', [
                            h('span', params.row.uuid?'是':'否')
                        ]);
                    }
                },
                {
                    title: '唯一字段',
                    key: 'unique',
                    render: (h, params) => {
                        let arr = [];
                        let data = params.row.unique.split(",");
                        for(let key in data){
                            arr.push(h('p',data[key]))
                        }
                        return h('div', arr);
                    }
                },
                {
                    title: '隐藏字段',
                    key: 'hidden',
                    render: (h, params) => {
                        let arr = [];
                        let data = params.row.hidden.split(",");
                        for(let key in data){
                            arr.push(h('p',data[key]))
                        }
                        return h('div', arr);
                    }
                },
                {
                    title: '创建时间',
                    key: 'created_at',
                    width:160,
                    render: (h, params) => {
                        return h('div', [
                            h('span', this.format(params.row.created_at))
                        ]);
                    }
                },
                 {
                    title: '更新时间',
                    key: 'updated_at',
                    width:160,
                    render: (h, params) => {
                        return h('div', [
                            h('span', this.format(params.row.updated_at))
                        ]);
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width:110,
                    render: (h, params) => {
                        return h('div', [
                            h('span', {
                                style: {
                                    color:'#06A0FD',
                                    cursor:'pointer',
                                    marginRight:'8px'
                                },
                                on: {
                                    click: () => {
                                        this.edit(params.row)
                                    }
                                }
                            }, '编辑'),
                            h('span', {
                                style: {
                                    color:'#06A0FD',
                                    cursor:'pointer'
                                },
                                on: {
                                    click: () => {
                                        this.del(params.row)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            relationData: [],
            pagination:{
                page:1
            },
            configData:{},
            formItem:{
            	name:'',
                schema:'1',
            },
            hidden:[],
            unique:[],
            disabledUnique:['id','created_at','updated_at','deleted_at'],
            uuid:'1',
            fieldData:[],
            dataId:0,
            //搜索
            name:'',
            fonts:[
                {font:'12px'},
                {font:'13px'},
                {font:'14px'},
                {font:'15px'},
                {font:'16px'},
                {font:'18px'},
                {font:'20px'},
                {font:'24px'},
                {font:'28px'},
                {font:'30px'},
                {font:'32px'}
            ],
            font:'20px',
            themeData:[
                {name:'monokai'},
                {name:'default'},
                {name:'3024-day'},
                {name:'3024-night'},
                {name:'abcdef'},
                {name:'ambiance'},
                {name:'base16-dark'},
                {name:'base16-light'},
                {name:'bespin'},
                {name:'blackboard'},
                {name:'cobalt'},
                {name:'colorforth'},
                {name:'dracula'},
                {name:'duotone-dark'},
                {name:'duotone-light'},
                {name:'elegant'},
                {name:'erlang-dark'},
                {name:'hopscotch'},
                {name:'icecoder'},
                {name:'isotope'},
                {name:'lesser-dark'},
                {name:'liquibyte'},
                {name:'material'},
                {name:'mbo'},
                {name:'mdn-like'},
                {name:'midnight'},
                {name:'neat'},
                {name:'neo'},
                {name:'night'},
                {name:'panda-syntax'},
                {name:'paraiso-dark'},
                {name:'paraiso-light'},
                {name:'pastel-on-dark'},
                {name:'railscasts'},
                {name:'seti'},
                {name:'solarized dark'},
                {name:'solarized light'},
                {name:'the-matrix'},
                {name:'tomorrow-night-bright'},
                {name:'tomorrow-night-eighties'},
                {name:'ttcn'},
                {name:'twilight'},
                {name:'vibrant-ink'},
                {name:'xq-dark'},
                {name:'xq-light'},
                {name:'yeti'},
                {name:'zenburn'}
            ],
            theme:'monokai',
            language:'JavaScript',
            languageData:[
                // {
                //     mode:'text/javascript',
                //     name:'javascript'
                // },{
                //     mode:'text/x-java',
                //     name:'java'
                // },{
                //     mode:'application/x-httpd-php',
                //     name:'php'
                // },{
                //     mode:'text/x-python',
                //     name:'python'
                // },
                {name: "APL", mime: "text/apl"},
                {name: "ASN.1", mime: "text/x-ttcn-asn"},
                
                {name: "Asterisk", mime: "text/x-asterisk"},
                {name: "C", mime: "text/x-csrc"},
                {name: "C++", mime: "text/x-c++src"},
                {name: "Cobol", mime: "text/x-cobol"},
                {name: "C#", mime: "text/x-csharp"},
                {name: "Clojure", mime: "text/x-clojure"},
                {name: "ClojureScript", mime: "text/x-clojurescript"},
                {name: "Closure Stylesheets (GSS)", mime: "text/x-gss"},
                {name: "CMake", mime: "text/x-cmake"},
                {name: "CoffeeScript", mime: "application/vnd.coffeescript"},
                {name: "Common Lisp", mime: "text/x-common-lisp"},
                {name: "Cypher", mime: "application/x-cypher-query"},
                {name: "Cython", mime: "text/x-cython"},
                {name: "Crystal", mime: "text/x-crystal"},
                {name: "CSS", mime: "text/css"},
                {name: "CQL", mime: "text/x-cassandra"},
                {name: "D", mime: "text/x-d"},
                {name: "Dart", mime: "application/dart"},
                {name: "diff", mime: "text/x-diff"},
                {name: "Django", mime: "text/x-django"},
                {name: "Dockerfile", mime: "text/x-dockerfile"},
                {name: "DTD", mime: "application/xml-dtd"},
                {name: "Dylan", mime: "text/x-dylan"},
                {name: "EBNF", mime: "text/x-ebnf"},
                {name: "ECL", mime: "text/x-ecl"},
                {name: "edn", mime: "application/edn"},
                {name: "Eiffel", mime: "text/x-eiffel"},
                {name: "Elm", mime: "text/x-elm"},
                {name: "Embedded Javascript", mime: "application/x-ejs"},
                {name: "Embedded Ruby", mime: "application/x-erb"},
                {name: "Erlang", mime: "text/x-erlang"},
                {name: "Esper", mime: "text/x-esper"},
                {name: "Factor", mime: "text/x-factor"},
                {name: "FCL", mime: "text/x-fcl"},
                {name: "Forth", mime: "text/x-forth"},
                {name: "Fortran", mime: "text/x-fortran"},
                {name: "F#", mime: "text/x-fsharp"},
                {name: "Gas", mime: "text/x-gas"},
                {name: "Gherkin", mime: "text/x-feature"},
                {name: "GitHub Flavored Markdown", mime: "text/x-gfm"},
                {name: "Go", mime: "text/x-go"},
                {name: "Groovy", mime: "text/x-groovy"},
                {name: "HAML", mime: "text/x-haml"},
                {name: "Haskell", mime: "text/x-haskell"},
                {name: "Haskell (Literate)", mime: "text/x-literate-haskell"},
                {name: "Haxe", mime: "text/x-haxe"},
                {name: "HXML", mime: "text/x-hxml"},
                {name: "ASP.NET", mime: "application/x-aspx"},
                {name: "HTML", mime: "text/html", mode: "htmlmixed"},
                {name: "HTTP", mime: "message/http"},
                {name: "IDL", mime: "text/x-idl"},
                {name: "Pug", mime: "text/x-pug"},
                {name: "Java", mime: "text/x-java"},
                {name: "Java Server Pages", mime: "application/x-jsp"},
                {name: "JavaScript", mime:"text/javascript"},
                {name: "JSON", mime: "application/json"},
                {name: "JSON-LD", mime: "application/ld+json"},
                {name: "JSX", mime: "text/jsx"},
                {name: "Jinja2", mime: "null"},
                {name: "Julia", mime: "text/x-julia"},
                {name: "Kotlin", mime: "text/x-kotlin"},
                {name: "LESS", mime: "text/x-less"},
                {name: "LiveScript", mime: "text/x-livescript"},
                {name: "Lua", mime: "text/x-lua"},
                {name: "Markdown", mime: "text/x-markdown"},
                {name: "mIRC", mime: "text/mirc"},
                {name: "MariaDB SQL", mime: "text/x-mariadb"},
                {name: "Mathematica", mime: "text/x-mathematica"},
                {name: "Modelica", mime: "text/x-modelica"},
                {name: "MUMPS", mime: "text/x-mumps"},
                {name: "MS SQL", mime: "text/x-mssql"},
                {name: "mbox", mime: "application/mbox"},
                {name: "MySQL", mime: "text/x-mysql"},
                {name: "Nginx", mime: "text/x-nginx-conf"},
                {name: "NSIS", mime: "text/x-nsis"},
                {name: "NTriples", mime: "application/n-triples"},
                {name: "Objective-C", mime: "text/x-objectivec"},
                {name: "OCaml", mime: "text/x-ocaml"},
                {name: "Octave", mime: "text/x-octave"},
                {name: "Oz", mime: "text/x-oz"},
                {name: "Pascal", mime: "text/x-pascal"},
                {name: "PEG.js", mime: "null"},
                {name: "Perl", mime: "text/x-perl"},
                {name: "PGP", mime: "application/pgp"},
                {name: "PHP", mime: "application/x-httpd-php"},
                {name: "Pig", mime: "text/x-pig"},
                {name: "Plain Text", mime: "text/plain"},
                {name: "PLSQL", mime: "text/x-plsql"},
                {name: "PowerShell", mime: "application/x-powershell"},
                {name: "Properties files", mime: "text/x-properties"},
                {name: "ProtoBuf", mime: "text/x-protobuf"},
                {name: "Python", mime: "text/x-python"},
                {name: "Puppet", mime: "text/x-puppet"},
                {name: "Q", mime: "text/x-q"},
                {name: "R", mime: "text/x-rsrc"},
                {name: "reStructuredText", mime: "text/x-rst"},
                {name: "RPM Changes", mime: "text/x-rpm-changes"},
                {name: "RPM Spec", mime: "text/x-rpm-spec"},
                {name: "Ruby", mime: "text/x-ruby"},
                {name: "Rust", mime: "text/x-rustsrc"},
                {name: "SAS", mime: "text/x-sas"},
                {name: "Sass", mime: "text/x-sass"},
                {name: "Scala", mime: "text/x-scala"},
                {name: "Scheme", mime: "text/x-scheme"},
                {name: "SCSS", mime: "text/x-scss"},
                {name: "Shell", mime: "text/x-sh"},
                {name: "Sieve", mime: "application/sieve"},
                {name: "Slim", mime: "text/x-slim"},
                {name: "Smalltalk", mime: "text/x-stsrc"},
                {name: "Smarty", mime: "text/x-smarty"},
                {name: "Solr", mime: "text/x-solr"},
                {name: "Soy", mime: "text/x-soy"},
                {name: "SPARQL", mime: "application/sparql-query"},
                {name: "Spreadsheet", mime: "text/x-spreadsheet"},
                {name: "SQL", mime: "text/x-sql"},
                {name: "SQLite", mime: "text/x-sqlite"},
                {name: "Squirrel", mime: "text/x-squirrel"},
                {name: "Stylus", mime: "text/x-styl"},
                {name: "Swift", mime: "text/x-swift"},
                {name: "sTeX", mime: "text/x-stex"},
                {name: "LaTeX", mime: "text/x-latex"},
                {name: "SystemVerilog", mime: "text/x-systemverilog"},
                {name: "Tcl", mime: "text/x-tcl"},
                {name: "Textile", mime: "text/x-textile"},
                {name: "TiddlyWiki ", mime: "text/x-tiddlywiki"},
                {name: "Tiki wiki", mime: "text/tiki"},
                {name: "TOML", mime: "text/x-toml"},
                {name: "Tornado", mime: "text/x-tornado"},
                {name: "troff", mime: "text/troff"},
                {name: "TTCN", mime: "text/x-ttcn"},
                {name: "TTCN_CFG", mime: "text/x-ttcn-cfg"},
                {name: "Turtle", mime: "text/turtle"},
                {name: "TypeScript", mime: "application/typescript"},
                {name: "TypeScript-JSX", mime: "text/typescript-jsx"},
                {name: "Twig", mime: "text/x-twig"},
                {name: "Web IDL", mime: "text/x-webidl"},
                {name: "VB.NET", mime: "text/x-vb"},
                {name: "VBScript", mime: "text/vbscript"},
                {name: "Velocity", mime: "text/velocity"},
                {name: "Verilog", mime: "text/x-verilog"},
                {name: "VHDL", mime: "text/x-vhdl"},
                {name: "Vue.js Component", mime: "script/x-vue"},
                {name: "XML", mime: "application/xml"},
                {name: "XQuery", mime: "application/xquery"},
                {name: "Yacas", mime: "text/x-yacas"},
                {name: "YAML", mime: "text/x-yaml"},
                {name: "Z80", mime: "text/x-z80"},
                {name: "mscgen", mime: "text/x-mscgen"},
                {name: "xu", mime: "text/x-xu"},
                {name: "msgenny", mime: "text/x-msgenny"}
            ],

			  }
		  },
		  created(){
            this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            this.getData();
            //获取配置信息
            this.fetch('/home/app/schema/info/schema').then(res=>{
                if(res&&res.data.data&&res.data.code){
                    this.configData = res.data.data;
                }
            })
        },
        methods:{
            getData(page){
                let url = '/home/app/schema/schema?page='+this.pagination.page;
                if(this.name){
                    url += '&name=' + this.name;
                }
                this.fetch(url).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.relationData = res.data.data.data;
                        this.pagination = res.data.data.pagination;
                    }
                })
            },
            changePage(page){
                this.pagination.page = page;
                this.getData(page);
            },
            //展开隐藏
            expand(row,type){
                if(type == 0){
                    this.showMore = row.id;
                }else{
                    this.showMore = 0;
                }
                
            },
            //搜索
            searchTable(table){
            	this.name = table;
            },
            searchData(){
                this.pagination.page = 1;
                let url = '/home/app/schema/schema';
                if(this.name){
                    url += '?name='+this.name;
                }
            	this.fetch(url).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.relationData = res.data.data.data;
                        this.pagination = res.data.data.pagination;
                    }
                })
            },
            //导出
            exportData(){
            	window.open(axios.defaults.baseURL+`/home/app/schema/export/schema?token=${axios.defaults.headers.common["Token"]}&baastoken=${axios.defaults.headers.common["BaasToken"]}&name=${this.name}`)
            },
            //创建密钥
            addRelation(){
                this.modal = true;
                this.dataId = 0;
                this.formItem.name = '';
                this.formItem.schema = '';
                this.hidden = [];
                this.unique = [];
                this.uuid = '1';
            },
            cancel(){
                this.fieldData = [];
                this.modal = false;
            },
            //选择数据表
            selectTable(table){
                this.formItem.name = table;
                this.hidden = []
                this.unique = []
                // if(this.dataId){
                //     return;
                // }
                if(table){
                    this.getField(table);
                }
            },
            getField(table){
                this.fetch('/home/app/schema/schema/field/'+table).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.fieldData = res.data.data;
                    }
                })
            },
            sure(){
            	if(!this.formItem.name){
            		this.$Message.warning('请选择数据表')
            		return;
            	}
            	
                let data = {
                    name:this.formItem.name,
                    uuid:this.uuid,
                    hidden:this.hidden.join(),
                    unique:this.unique.join(),
                    schema:this.formItem.schema
                }
                if(this.dataId){
                    data.id = this.dataId;
                }
                this.fetch('/home/app/schema/add/schema',data).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.$Message.success(this.dataId?'编辑成功':'新增成功')
                        this.getData();
                        this.fieldData = [];
                        this.modal = false;
                    }
                })
            },
            edit(row){
                this.dataId = row.id;
                this.modal = true;
                this.fetch('/home/app/schema/schema/'+row.id).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        let data = res.data.data;
                        this.formItem = data;
                        this.uuid = data.uuid;
                        
                        this.fetch('/home/app/schema/schema/field/'+data.name).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.fieldData = res.data.data;
                                this.hidden = [];
                                this.hidden = data.hidden.split(',');
                                this.unique = [];
                                if(data.unique){
                                    this.unique = data.unique.split(',');
                                }
                                
                            }
                        })
                    }
                })
            },
            del(row){
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除吗</p>',
                    onOk: () => {
                        this.fetch('/home/app/schema/del/schema/'+row.id).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getData();
                            }
                        })
                    }
                });
                
            },
            expandCode(){
                this.code_modal = true
            },
            codeCancel(){
                this.code_modal = false
            },
            selectTheme(name){
                this.editorOptions.theme = this.theme = name;
            },
            //字体大小
            fontSizes(name){
                this.font = this.$refs.codemirrors.style.fontSize = name;
            },
            selectLanguage(name){
                 this.editorOptions.mode = name;
                 for(let key in this.languageData){
                    if(this.languageData[key].mime == name){
                        this.language = this.languageData[key].name;
                    }
                 }
            }
        }
	}
</script>
<style scoped>
	.btn-search{
		width:60px;height:30px;margin-right: 16px;border-radius: 3px
	}
	.btn-export{
		width:90px;height:30px;line-height: 30px;border-radius: 3px
	}
    .not_select{
        color:#c3cbd6;
    }
    .search-data{
        float:left;
        width:80%;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis
    }
</style>
<style type="text/css">
    .ivu-select-multiple .ivu-select-input{
        height: 40px!important
    }
    .CodeMirror-code>div{
        line-height: 18px;
    }
    .cm-matchhighlight {
        background-color: rgba(144,238,237,0.5);
    }
    .CodeMirror-selection-highlight-scrollbar {
        background-color: green
    }
    .schema-modal .ivu-modal{
        top:20px;
    }
</style>

